<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>首页</title>
    <link rel="stylesheet" href="./css/common.css">
    <!-- Link Swiper's CSS -->
  <link rel="stylesheet" href="./swiper/swiper-bundle.min.css" />
  <script src="./fonts/iconfont.js"></script>
</head>
      <style>
.icon {
    width: 1em;
   height: 1em;
   vertical-align: -0.15em;
    fill: currentColor;
   overflow: hidden;
   background-color: transparent; /* 确保背景透明 */ 

}

ul{
   padding: 0;
   margin: 0;
   list-style: none;
}
ul,p,body{
  padding: 0;
  margin: 0;
}
.bnav{
/* 固定在下面 */
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 9;
  background-color: #ffffff;
  border-top: 0.2vw solid #eee;
}
body{
margin-bottom: 50vw
}
.bnav>ul{
display: flex;
}
.bnav li{
width: 20%;
display: flex;
justify-content: center;/* 设置容器属性 */
}
.bnav div{
position: relative;
}
.bnav svg{
font-size: 5vw;
margin: 3px 0;
}
.bnav p{
font-size: 14px;
margin: 3px 0; 
text-align: center;
color: #746d6d;
}

/* 搜索框 ************************************/
#header{
       display: flex;
       background-color: #fff;
       padding: 6px 60px;/* 搜索框距离 */
       
   }
   .search{
       background-color: #eee;
       border-radius: 15px;
       flex-grow: 1;
       display: flex;
       align-items: center;
   }
   .search>span{
       font-size: 14px;
       margin: 0px 8px;
  
   }
   #search{/* 搜索框里 ************************************/
       flex-grow: 2;
       border: none;
       outline: none;/* 轮廓 */
       margin-right: 20px;
       height: 40px;
       background-color: #eee;
       text-align: center;
   }
   .btn{
       margin-left: 8px;
       text-align: center;
       color: #eee;
   }
   .icon-bofang{
       font-size: 14px;
   }
   .btn p{
       font-size: 8px;
   }
   .bnav1{
/* 上面两个图案************************************/
  position: fixed;
  left: 20px;
  top: 7px;
  width: 100%;
  z-index: 9;
  font-size: 25px;
}
.bnav2{
/* 上面两个图案 ************************************/
position: fixed;  
top: 7px;  
right: 28px;  
width: auto;  
height: auto;  
max-width: 50px;  
max-height: 50px;  
font-size: 25px;
}
/* tab选项卡 ***********************************/
.tab {
       width: 100%;
   }
         
   .t-title {  /* 横线*/
       height: 40px;
       border-bottom: 1px solid #eee;
   }

   .t-title span {
       float: left;
       width: 120px;
       text-align: center;
       line-height: 32px;
       font-size: 14px;
   }
   .show .p4{/* 页面动态 第一行字 */
		    display: block;
            position: relative;
            left: 36vw;
            top: 33vw;
            font-size: 3vw;
        }
        .show .p5{/* 页面动态 第二行字 */
            display: block;
            position: relative;
            left: 33vw;
            top: 34vw;
            font-size: 2vw;
            color: #5b565684;
        }
        .show .T img{
            display: block;
            position: relative;
            top: 35vw;
            left: 35vw;
            width: 20%;
            
        }
   
   .t-title .cur {/* 文字 */
       margin-bottom: -1px;
       background-color: #fff;
       color: #5b565684;
       font-weight: bold;
   }

   .tc .bnav2{
/* 右上角图标(更多) ************************************/
       position: absolute;  
       top: 100px;  
       right: 25px;  
       width: auto;  
       height: auto;  
       max-width: 5px;  
       max-height: 5px;  
       font-size: 25px;
       color: #eee;
   }
    /* 赞转发评论 ************************************/
    .tc .bnav3{/* 点赞 */
       position: relative;
       left: 15vw;
       top: -2vw;
       font-size: 6vw;
    }
     .P .p1{/* 点赞数 */
       position: relative;
       left: 21vw;
       top: -27vw;
       font-size: 4vw;
       color: #353232b0;
   }

   .tc .bnav4{/* 评论 */
       position:relative;
       left: 45vw;
       top: -22vw;
       font-size: 5vw;
   }
   .tc .p2{/* 评论数 */
       position: relative;
       left: 51vw;
       top: -39vw;
       font-size: 4vw;
       color: #353232b0;
   }
   
   .tc .bnav5{/* 转发 */
       position: relative;
       left: 70vw;
       top: -30vw;
       font-size: 7vw;
   }
   .tc .p3{/* 转发数 */
       position: relative;/* 相对于其原始位置移动， */
       left: 70vw;
       top: -39vw;
       font-size: 4vw;
       color: #353232b0;
   }

   .user img{/* 用户头像 */
       position: relative;
       border-radius: 50%;
       width: 12%;           
       left: 2vw;
       top: -43vw;
   }

   .tc h4{/* 用户名 */
       position: relative;
       left: 18vw;
       top: 3vw;
       font-size: 4vw;
   }
   .tc p{/* 用户个性签名 */
       position: relative;
       left: 18vw;
       top: 4vw;
       font-size: 3vw;
       color: #353232b0;
   }
   .tc .p{/* 评论内容 */
       position: relative;
       left: 3vw;
       top: -40vw;
       font-size: 4vw;
   }
   .ping img{/* 评论图 */
    position: relative;
       border-radius: 10px;  
       width: 35%; 
       left: 3vw;
       top: 25vw;
   }
   
   .tab li {
       list-style: none;
       padding: 0;
       margin: 0;
   }
   .tc .box1{
       position: relative;
       top: 10vw;
       border-bottom: 2vw solid #eee;
   }

  /* /*  /* 第二条Css */
  
   
   .user2 img{/* 二-用户头像 */
       position: relative;
       border-radius: 50%;
       width: 13%;            
       left: 3vw;
       top:-28vw;
   }

   .tc .pp4{/* 二-用户名 */
       position: relative;
       left:20vw;
       top: -42vw;
       font-size: 3vw;
   }
   .tc .pp5{/* 二-用户个性签名 */
       position: relative;
       left: 20vw;
       top: -45vw;
       font-size: 3vw;
       color: #353232b0;
   }
   .tc .pp{/* 二-评论内容 */
       position: relative;
       left: 3vw;
       top: -40vw;
       font-size: 4vw;
   }
   .pping1 img{/* 二-评论图 */
        position: relative;
       border-radius: 10px;  
       width: 40vw;
       height: 40vw; 
       left: 2vw;
       top: -35vw;
   }
   .pping2 img{/* 评论图 */
        position: relative;
       border-radius: 10px;  
       height: 40vw;
       width: 45vw; 
       left: 50vw;
       top: -75vw;
   }  
   #T img{
    width: 90%;
    position: relative;
    top: -75vw;
    left: 2vw;
   }
   #content {  
            height: 150vw; /* 设置内容高度以模拟滚动 */  
            background-color: #f0f0f0;  
        }  
        #likeCount {  
         position: relative;
         left: 22vw;  
         top: -15vw;
        font-size: 4vw;  
        }  
        #likeButton:active{ 
            font-size: 2vw;  
            color:gray;
            width: 2vw;
        }
        #likeButton {
            background-color:transparent;
            border: none;
            width: 5vw;
            color: #fff;
        }
        #likeButton{
            position: relative;
            top: -10vw;
            left: 16vw;
        }
        .bnav a{
            color: #746d6d;
            font-size: 14px;
            position: relative;
            top: 7vw;
            left: -8vw;
        }
        .bnav a:active{
            color: green;
            border-color: aquamarine;
        }
</style>

</head>
<body>

<nav class="bnav">
   <ul>
       <li>
           <div>
               <svg class="icon" aria-hidden="true">
                   <use xlink:href="#icon-shouye-tianchong-copy"></use>
               </svg>
               <p>首页</p>
           </div>
           <li>
               <div>
                   <svg class="icon" aria-hidden="true">
                       <use xlink:href="#icon-shouzhang"></use>
                   </svg>
                   <a href="2-Audiovisual.html">书影音</a> 
                 <!--   <p>书影音</p> -->
               </div>
           </li>
           <li>
               <div>
                   <svg class="icon" aria-hidden="true">
                       <use xlink:href="#icon-hongwai"></use>
                   </svg>
                   <p>小组</p>
               </div>
           </li>
           <li>
               <div>
                   <svg class="icon" aria-hidden="true">
                       <use xlink:href="#icon-buildings_small-shop"></use>
                   </svg>
                   <a href="5-shop.html">集市</a>
                  <!--  <p>市集</p> -->
               </div>
           </li>
           <li>
               <div>
                   <svg class="icon" aria-hidden="true">
                       <use xlink:href="#icon-wode1"></use>
                   </svg>
                   <a href="3-menu.html">我</a>
                 <!--   <p>我</p> -->
               </div>
           </li>
       </li>
   </ul>
</nav>
<!-- 搜索框 -->
<header id="header">
   <div class="search">
       <span class="iconfont icon-sousuo"></span>
       <input type="text" name="search" id="search" placeholder="输入后自动消失">
       <svg class="icon" aria-hidden="true">
           <use xlink:href="#icon-sousuo1-copy"></use>
       </svg>
   </div>
   <div class="btn">
       <span class="iconfont icon-bofang"></span>
   </div>
</header>
<nav class="bnav1">  
   <ul>
       <li>
           <div>
               <svg class="icon" aria-hidden="true">
                   <use xlink:href="#icon-caidan-copy"></use>
               </svg>
           </div>
       </li>
       
   </ul>
</nav>
<nav class="bnav2">  
   <ul>
       <li>
           <div>
               <svg class="icon" aria-hidden="true">
                   <use xlink:href="#icon-envelope"></use>
               </svg>
           </div>
       </li>
       
   </ul>
</nav>
<!-- tab -->
<div class="tab">
   <div class="t-title">
       <span class="cur">动态</span>
       <span>推荐</span>
   </div>
   <!-- 页面里的内容 -->

   <div class="tc show">
    
           <div class="T"><img src="./images/豆瓣猫.jpg"></div>
       
       <li>
           <span class="p4">没有任何动态</span>
       </li>
       <li>
           <span class="p5">关注豆友，查看他们的最新动态</span>
       </li>
   </div>

   <div class="tc">
        <!-- 第一条推荐内容 ------------------------------------------->
   <h4>savitar</h4>
   <p><strong>说</strong></p>  
   <li>
       <span class="ping"><img src="./images/评论图jpg.jpg"></span>
   </li>
   <li>
       <span class="user"><img src="./images/头1.jpg"></span>
   </li>
   <li>
       <span class="p"><strong>这部电影太治愈啦！海蒂小天使，克拉拉小仙女，纯真<br>最无法抗拒，还有这部电影的取景瑞士真的也太好看</strong></span>
   </li>
   <div class="box1"></div>
   <!-- 第一条 -->
<!-- 赞转发评论   ------------------------------------>
<nav class="bnav3">  <!-- 赞图标 -->
    <ul>
        <li>
            <div> 
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-zan"></use>
                </svg>
            </div> 
        </li>            
    </ul>
 </nav>

 <button id="likeButton">+</button>   
 <p id="likeCount">0</p>  

 <nav class="bnav4"> <!-- 评论 --> 
      <ul>
          <li>
              <div> 
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-pinglun"></use>
                  </svg>
              </div> 
          </li>            
      </ul>
  </nav>
 
  <nav class="bnav5"> <!-- 转发 --> 
      <ul>
          <li>
              <div> 
                  <svg class="icon" aria-hidden="true">
                      <use xlink:href="#icon-zhuanfa"></use>
                  </svg>
              </div> 
          </li>            
      </ul>
  </nav>
  <div class="P">
    <!-- <span class="p1">113</span> -->

    <span class="p2">38</span>

    <span class="p3">2</span>
</div>
   <!-- 第二条推荐 ------------------------------------------>
   <li>
       <span class="user2"><img src="./images/头2.jpg"></span>
   </li> 
   <li>
       <span class="pp4"><strong>丘比特</strong></span>
   </li>
   <li>
       <span class="pp5">看过⭐⭐⭐⭐</span>
   </li>
   <li>
       <span class="pp"><strong>爱真的存在吗？</strong>  文章分为以下几个部分：<br>一，老金不爱女儿的表现汇总<br>
           二，一些在国产片中罕见的处理<br>正式原生家庭问题<a href="#">全文>></a></span>
   </li>
  

   <li>
       <span class="pping1"><img src="./images/二评-1.jpg"></span>
   </li>
   <li>
       <span class="pping2"><img src="./images/二评-2.jpg"></span>
   </li>

   <!-- 第二条 -->
    <!-- 赞转发评论   ------------------------------------>
   <div id="T">
    <img src="./images/评论赞转发.jpg">
   </div>
<script src="./js/tab.js"></script><!-- 选中效果 -->

  
    <script>  
        var likeCount = 0;  
        var likeButton = document.getElementById('likeButton');  
        var likeCountElement = document.getElementById('likeCount');  
  
        likeButton.addEventListener('click', function() {  
            likeCount++;  
            likeCountElement.textContent =+ likeCount;  
        });  
    </script>  
</body>
</html>